import { getTreeData } from '@/api/codeServer'
import { SmileOutlined } from '@ant-design/icons'
import { useRequest } from 'ahooks'
import { Skeleton, Tree } from 'antd'
import type { AntdTreeNodeAttribute, TreeProps } from 'antd/es/tree'
import { useState } from 'react'
import { DetailTable } from './DetailTable'

function Pea() {
  const [treeKey, setTreeKey] = useState<string>('')

  const { data: treeData, loading } = useRequest(async () => {
    const res = await getTreeData({
      pageSize: 999,
      pageIndex: 1
    })
    return res
  })

  const onSelect: TreeProps['onSelect'] = (selectedKeys) => {
    selectedKeys[0] && setTreeKey(selectedKeys[0] as string)
  }

  return (
    <div
      style={{
        display: 'flex',
        height: '100%'
      }}
    >
      <div style={{ flex: '0 0 300px', background: '#fff' }}>
        <div style={{ padding: 16, borderBottom: '1px solid #e9e9e9' }}>
          组织机构
        </div>
        <div
          style={{
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingTop: 12
          }}
        >
          <Skeleton loading={loading} active>
            <Tree
              selectable
              defaultExpandedKeys={['1']}
              selectedKeys={[treeKey]}
              fieldNames={{
                title: 'name',
                key: 'id',
                children: 'children'
              }}
              onSelect={onSelect}
              treeData={treeData}
              icon={(props: AntdTreeNodeAttribute) => {
                // console.log(props) // ? 不执行代码
                return <SmileOutlined />
              }}
            />
          </Skeleton>
        </div>
      </div>
      <div style={{ flex: 1, padding: 12 }}>
        <div style={{ background: '#fff', height: '100%' }}>
          <DetailTable associationId={treeKey} />
        </div>
      </div>
    </div>
  )
}

export default Pea
